﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <link href="css/themes/default/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-theme="b">
            <h1>
                用户列表</h1>
        </div>
        <script type="text/javascript">
            $(function () {
                var db = window.openDatabase("SugarDB", "1.0", "SugarDB", 5000000);
                db.transaction(queryDB, errorCB, successCB);
            });
            // 查询数据库
            function queryDB(tx) {
                var selectsql = "select * from LoginInfo";
                tx.executeSql(selectsql, [], querySuccess, errorCB);
            }
            // 查询成功后调用的回调函数
            function querySuccess(tx, results) {
                if (results.rows.length != 0) {
                    for (var i = 0; i < results.rows.length; i++) {
                        var id = results.rows.item(i).id
                        var loginName = results.rows.item(i).loginName
                        var sex = results.rows.item(i).sex
                        var createtime = results.rows.item(i).createtime
                        var img = "img/boy.png";
                        if (sex == 1) {
                            img = "img/girl.png";
                        }
                        var list = $(" <li><a href='#'> <img src=" + img + " /> <h1>" + "【" + id + "】用户名：" + loginName + "</p>" + "创建时间：" + createtime + "</h1>   </a></li>");
                        // $("#list").append(list).find("li:last").hide();
                        $("#list").append(list).find("li:last").show();
                        $('ul').listview('refresh');
                        $("#list").find("li:last").slideDown(300);
                    }
                }
            }
            function errorCB(err) {
                console.log("错误处理的SQL：" + err.code + "错误信息：" + err.message);
                alert("错误信息：" + err.message);
            }
            // 事务执行成功后调用的回调函数
            function successCB() {
                // alert("查询数据执行成功");
            } 
        </script>
        <div data-role="content">
            <ul data-role="listview" id="list" data-inset="true">
            </ul>
        </div>
    </div>
</body>
</html>
